<template>
  <el-dialog
      v-model="dialogVisible"
      title="客户详情"
      width="700px"
      :before-close="handleCloseDialog"
  >
    <el-form
        ref="detailFormRef"
        :model="detailForm"
        label-width="120px"
        class="customer-detail-form"
        disabled
    >
      <el-row :gutter="16">
        <el-col :span="12">
          <el-form-item label="客户名">
            <el-input
                v-model="detailForm.name"
                class="customer-detail-form-input"
                readonly
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系人">
            <el-input
                v-model="detailForm.contact"
                class="customer-detail-form-input"
                readonly
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="16">
        <el-col :span="12">
          <el-form-item label="联系电话">
            <el-input
                v-model="detailForm.phone"
                class="customer-detail-form-input"
                readonly
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="电子邮箱">
            <el-input
                v-model="detailForm.email"
                class="customer-detail-form-input"
                readonly
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="地址">
        <el-input
            v-model="detailForm.address"
            class="customer-detail-form-input"
            type="textarea"
            :rows="2"
            readonly
        />
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="customer-detail-dialog-footer">
        <el-button @click="handleCloseDialog">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import {ref, reactive, watch} from 'vue'
import {getCustomer} from "../../../api/customerApi.js";
import {ElMessage} from "element-plus";

// 定义props
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  customerId: {
    type: Number,
    default: null
  }
})

// 定义emits
const emits = defineEmits(['update:visible'])

// 对话框显示状态
const dialogVisible = ref(false)

// 详情表单数据
const detailForm = reactive({
  name: '',
  contact: '',
  phone: '',
  email: '',
  address: ''
})

// 监听visible变化
watch(() => props.visible, (newVal) => {
  dialogVisible.value = newVal
  if (newVal && props.customerId) {
    loadCustomerData()
  }
})

// 监听dialogVisible变化，同步到父组件
watch(dialogVisible, (newVal) => {
  if (!newVal) {
    emits('update:visible', false)
  }
})

// 加载客户数据
const loadCustomerData = async () => {
  if (!props.customerId) return;
  try {
    const data = await getCustomer(props.customerId);
    initFormData(data);
  } catch (error) {
    console.error('获取客户详情失败:', error);
    ElMessage.error('获取客户详情失败');
  }
}

// 初始化表单数据
const initFormData = (data) => {
  if (data) {
    detailForm.name = data.name || ''
    detailForm.contact = data.contact || ''
    detailForm.phone = data.phone || ''
    detailForm.email = data.email || ''
    detailForm.address = data.address || ''
  }
}

// 关闭对话框
const handleCloseDialog = () => {
  dialogVisible.value = false
}
</script>

<style scoped lang="scss">
.customer-detail {
  &-form {
    padding: 16px 0;

    &-input {
      width: 100%;

      :deep(.el-input__inner) {
        background-color: #f5f7fa;
        border-color: #e4e7ed;
        color: #606266;
        cursor: not-allowed;
      }
    }
  }

  &-dialog {
    &-footer {
      display: flex;
      justify-content: center;
      gap: 8px;
    }
  }
}
</style>

